<template>
  <view>
    <view class="container">
      <view class="container_fl" @click="modification()">
        <!-- <image src="../../static/iocn8.png" v-if="src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/' || src == 'https://syh-1.oss-cn-shanghai.aliyuncs.com/undefined'"></image> -->
        <image :src="src"></image>
      </view>
      <view class="container_fr">
        <view class="container_box">
          <text class="textview">{{ list.trueName }}</text>
          <text class="viewtext" v-if="list.mobile == null">暂无</text>
          <text class="viewtext" v-else>{{ list.mobile }}</text>
        </view>
        <image src="../../static/iocn29.png" @click="setup()"></image>
      </view>
    </view>
    <view class="content">我的钱包</view>
    <view class="middle">
      <view class="middle_top">账户余额（元）</view>
      <view class="middle_key">{{ list.balanceAmt }}元<text class="freeeze">(已冻结{{list.freezeAmount}}元)</text></view>
      <view class="middle_box">
        <view class="box_box" @click="Recharge()">充 值</view>
        <view @click="withdrawal()">提 现</view>
      </view>
    </view>
    <view class="section">
      <view class="section_key" @click="receipt()">
        <view>回单管理</view>
        <image src="../../static/iocn11.png"></image>
      </view>
      <view class="section_key" @click="authentication()">
        <view>身份认证</view>
        <image src="../../static/iocn11.png"></image>
      </view>
      <view class="section_key" @click="tomanage()">
        <view>员工管理</view>
        <image src="../../static/iocn11.png"></image>
      </view>
      <view class="section_key" @click="tofleet()">
        <view>车队管理</view>
        <image src="../../static/iocn11.png"></image>
      </view>
      <view class="section_box">
        <view class="viewbox">联系客服</view>
        <view class="viewtext" @click="guestbook()">
          <image src="../../static/iocn30.png"></image
          ><text>任何问题请联系客服</text>
        </view>
        <view class="viewtext" @click="bodakefu()">
          <image src="../../static/iocn31.png"></image
          ><text>0510-85708887</text>
        </view>
      </view>
    </view>

    <view class="footer" @click="dakai()">
      <view @click="checkIndex(1)">服务协议</view>
      <text></text>
      <view @click="checkIndex(2)">隐私政策</view>
    </view>

    <view>
      <Tabbar :current="'3'"></Tabbar>
    </view>

    <!-- 弹窗 -->
    <view class="screenshot" v-show="!notification">
      <view class="screenshot_key">
        <text class="viewtext">对不起，您还未完成实名认证请立即前往</text>
        <view class="screenshot_box">
          <view class="viewtes" @click="authentication()">确认</view>
          <view @click="guanbi()">取消</view>
        </view>
      </view>
    </view>

    <view class="screenshot" v-show="Agreement">
      <view class="scree_bos">
        <uni-icons
          type="closeempty"
          size="30"
          @click="guanbi()"
          class="guanbi"
        ></uni-icons>
        <!-- <image src="../../static/iocn7.png" @click="guanbi()" class="guanbi"></image> -->
        <view class="view_text">{{ subTitle }}</view>
        <view class="service1" v-if="index == 1">
          <scroll-view scroll-y="true">
            <view class="service1">
              <rich-text :nodes="contents"></rich-text>
            </view>
          </scroll-view>
        </view>
        <view class="service1" v-if="index == 2">
          <scroll-view scroll-y="true">
            <view class="service1">
              <rich-text :nodes="contents"></rich-text>
            </view>
          </scroll-view>
        </view>
        <view class="view_bls" @click="guanbi()">同意</view>
      </view>
    </view>
  </view>
</template>

<script>
import { GetUserById, serviceAgreement } from "@/public/Api/update.js";
import { setValue, getValue } from "@/public/storeage/index.js";
import Tabbar from "@/pages/navigation/navigation.vue";
export default {
  components: {
    //注册组件
    Tabbar,
  },
  data() {
    return {
      notification: true,
      Agreement: false,
      list: [],
      src: "", // 用来在前端展示的图片，如上面图片中显示的一样
      contents: "",
      shows: true,
      index: 0,
      id: 2,
      navIndexs: 0,
      subTitle: "",
    };
  },
  onLoad() {
    // var statusact = getValue('statusact')
    // if (statusact == '停用')  {
    // 	uni.reLaunch({
    // 		url: '/pages/Loginas/index'
    // 	})
    // }
  },
  onShow() {
    this.GetUserById();
    // var approved = this.list.approved
    // if(approved == false){
    // 	this.Agreement = true
    // }
  },
  methods: {
    checkIndex(e) {
      console.log(e);
      this.navIndexs = e;
      var navIndexs = this.navIndexs;
      if (navIndexs == 1) {
        this.id = 2;
        this.index = 1;
      } else {
        this.id = 3;
        this.index = 2;
      }
    },

    //服务协议
    async serviceAgreement() {
      var id = this.id;
      try {
        const { data: res } = await serviceAgreement({
          id,
        });
        this.contents = res.result.contents;
        this.subTitle = res.result.subTitle;
        console.log(res, "服务");
      } catch (e) {}
    },
    guestbook() {
      uni.navigateTo({
        url: "/pages/guestbook/guestbook",
      });
    },
    // 拨打客服电话
    bodakefu() {
      var phone = "85708887";
      uni.makePhoneCall({
        phoneNumber: phone,
        success: (res) => {
          this.CallRecordCreate(item);
        },
        fail: (res) => {
          console.log("打电话失败了");
        },
      });
    },
    guanbi() {
      this.Agreement = false;
      this.notification = true;
    },
    dakai() {
      this.Agreement = true;
      this.serviceAgreement();
    },

    Recharge() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/Recharge",
      });
    },
    withdrawal() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/withdrawal",
      });
    },
    setup() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/setup",
      });
    },

    modification() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/modification",
      });
    },

    authentication() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/authentication",
      });
    },
    tomanage() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/manage",
      });
    },
    tofleet() {
      uni.navigateTo({
        url: "/pages/PersonalCenter/fleet",
      });
    },
    receipt() {
      uni.navigateTo({
        url: "/pages/receipt/receipt",
      });
    },

    // 获取用户详情
    async GetUserById() {
      var id = getValue("id");
      try {
        const { data: res } = await GetUserById({
          id,
        });
        this.list = res.result;
        this.notification = res.result.approved;
        this.src =
          "https://syh-1.oss-cn-shanghai.aliyuncs.com/" + res.result.avatar;
      } catch (e) {}
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
}

.container {
  background-color: #fff;
  width: 100%;
  padding: 35upx 50upx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .container_fl {
    image {
      background-image: url("../../static/iocn8.png");
      width: 119upx;
      height: 119upx;
      border-radius: 50%;
    }
  }

  .container_fr {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-left: 65upx;
    width: 100%;

    .container_box {
      .textview {
        display: block;
        font-size: 38upx;
        font-weight: bold;
      }

      .viewtext {
        display: block;
        font-size: 21upx;
        font-weight: bold;
        padding-top: 15upx;
      }
    }

    image {
      width: 47upx;
      height: 47upx;
    }
  }
}

.content {
  width: 703upx;
  height: 133upx;
  font-size: 28upx;
  color: #fff;
  background-color: #ef4d3d;
  border-radius: 17upx;
  margin: 0 auto;
  font-weight: bold;
  padding: 21upx 28upx;
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
}

.middle {
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  width: 720upx;
  background-color: #fff;
  border-radius: 17upx;
  padding: 30upx 45upx;
  margin: 0 auto;
  margin-top: -50upx;

  .middle_top {
    font-size: 24upx;
    color: #383838;
  }

  .middle_key {
    font-size: 31upx;
    text-align: center;
    font-weight: bold;
    padding-top: 25upx;
  }
.freeeze{
			font-size:29upx;
			color: #EF4D3D;
			margin-left: 15upx;
			
		}
  .middle_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 33upx;

    view {
      width: 112upx;
      height: 46upx;
      line-height: 42upx;
      border: 2upx solid #ef4d3d;
      text-align: center;
      font-size: 28upx;
      color: #ef4d3d;
      font-weight: bold;
      border-radius: 10upx;
      margin: 0 70upx;
    }

    .box_box {
      background-color: #ef4d3d;
      color: #fff;
    }
  }
}

.section {
  box-shadow: 1.75upx 1.75upx 7.01upx 0px #cccccc,
    1.75upx 1.75upx 7.01upx 0px #cccccc;
  width: 720upx;
  background-color: #fff;
  border-radius: 17upx;
  margin: 0 auto;
  margin-top: 25upx;

  .section_key {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 86upx;
    border-bottom: 1upx solid #e5e5e5;
    padding: 0 35upx;

    view {
      font-size: 28upx;
      color: #000;
      font-weight: bold;
    }

    image {
      width: 32upx;
      height: 32upx;
    }
  }

  .section_box {
    padding: 20upx 35upx;

    .viewbox {
      font-size: 28upx;
      font-weight: bold;
    }

    .viewtext {
      display: flex;
      align-items: center;
      padding-top: 10upx;

      image {
        width: 33upx;
        height: 33upx;
      }

      text {
        font-size: 24upx;
        color: #383838;
      }
    }
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25%;

  text {
    width: 2upx;
    height: 28upx;
    background-color: #383838;
    margin: 0 20upx;
  }

  view {
    font-size: 26upx;
    color: #383838;
  }
}

.screenshot {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;

  .scree_bos {
    width: 676.4upx;
    // height: 441.59upx;
    opacity: 1;
    background: #ffffff;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20upx;
    padding: 50upx;

    .guanbi {
      width: 32upx;
      height: 32upx;
      position: absolute;
      top: 18upx;
      right: 68upx;
    }
    .service1 {
      height: 600upx;
    }

    .view_text {
      padding-top: 30upx;
      padding-bottom: 40upx;
      text-align: center;
      font-size: 31upx;
      font-weight: bold;
    }

    .view_bos {
      padding-top: 35upx;
      text-align: justify;
      font-size: 26upx;

      text {
        color: #ef4d3d;
      }
    }

    .view_bls {
      width: 231upx;
      border-radius: 10upx;
      text-align: center;
      background-color: #ef4d3d;
      color: #fff;
      line-height: 72upx;
      font-size: 31upx;
      margin: 0 auto;
      margin-top: 50upx;
    }
  }

  .screenshot_key {
    width: 676.4upx;
    // height: 441.59upx;
    opacity: 1;
    background: #ffffff;
    box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 20upx;
    padding: 60upx 110upx;

    .viewtext {
      display: block;
      text-align: center;
      line-height: 60upx;
      font-size: 31upx;
      font-weight: bold;
    }

    .screenshot_box {
      display: flex;
      align-items: center;
      justify-content: center;

      view {
        width: 189upx;
        height: 72upx;
        border-radius: 20upx;
        text-align: center;
        line-height: 68upx;
        border: 2upx solid #ef4d3d;
        color: #ef4d3d;
        font-size: 31upx;
        font-weight: bold;
        margin: 40upx 40upx 0;
      }

      .viewtes {
        background-color: #ef4d3d;
        color: #fff;
      }
    }
  }
}
</style>
